<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            background-color: pink;
            color: #fff;
            border: 1px solid pink;
            border-radius: 5px;
        }

        .ciphertext {
            padding-bottom: 10px;
        }

        select {
            background-color: pink;
            width: 150px;
            height: 20px;
            border-radius: 5px;
            color: #fff;
        }

        .choose {
            font-size: 15px;
            background-color: pink;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 2px;
            padding-bottom: 2px;
            border-radius: 5px;
            color: #fff;
        }
        .ciphertext .output,
        .plaintext .output2{
            background-color: pink;
            border-radius: 5px;
            color: #fff;
        }
    </style>
</head>

<body>
    <h2>
        <span class="choose">加密算法：</span>
        <span class="choose">IROT13</span>
    </h2>
    <form>
        <div class="ciphertext">
            <span>明文：</span>
            <input type="text" class="encrypt"> 
            <button>加密</button>
            <span class="output"></span>
        </div>
        <div class="plaintext">
            <span>密文：</span>
            <input type="text" class="decrypt"> 
            <button>解密</button>
            <span class="output2"></span>
        </div>
        <button type="reset" class="empty">清空</button>
    </form>
    <script>
        const but1 = document.querySelector('.ciphertext button')  // 加密按钮
        const but2 = document.querySelector('.plaintext button')   // 解密按钮
        const text1 = document.querySelector('.encrypt')  // 明文
        const text2 = document.querySelector('.decrypt')   // 密文
        // IROT13加密
        function rotate(str) {
            var result = '';
            for (var i = 0; i < str.length; i++) {
                var charCode = str.charCodeAt(i);
                if (charCode >= 'a'.charCodeAt(0) && charCode <= 'z'.charCodeAt(0)) {
                    charCode += 13;
                    if (charCode > 'z'.charCodeAt(0)) {
                        charCode -= 26;
                    }
                } else if (charCode >= 'A'.charCodeAt(0) && charCode <= 'Z'.charCodeAt(0)) {
                    charCode += 13;
                    if (charCode > 'Z'.charCodeAt(0)) {
                        charCode -= 26;
                    }
                } else {
                    result += str.charAt(i);
                }
                result += String.fromCharCode(charCode);
            }
            return result;
        }

        // IROT13解密
        function decrypt(str) {
            var result = '';
            for (var i = 0; i < str.length; i++) {
                var charCode = str.charCodeAt(i);
                if (charCode >= 'a'.charCodeAt(0) && charCode <= 'z'.charCodeAt(0)) {
                    charCode -= 13;
                    if (charCode < 'a'.charCodeAt(0)) {
                        charCode += 26;
                    }
                } else if (charCode >= 'A'.charCodeAt(0) && charCode <= 'Z'.charCodeAt(0)) {
                    charCode -= 13;
                    if (charCode < 'A'.charCodeAt(0)) {
                        charCode += 26;
                    }
                } else {
                    result += str.charAt(i);
                }
                result += String.fromCharCode(charCode);
            }
            return result;
        }

        but1.addEventListener('click', function () {
            document.querySelector('.ciphertext .output').innerHTML = `
            ${text1.value}加密之后是${decrypt(text1.value)}
            `
        })
        but2.addEventListener('click', function () {
            document.querySelector('.plaintext .output2').innerHTML = `
            ${text2.value}解密之后是${decrypt(text2.value)}
            `
        });

        document.querySelector('form').addEventListener('submit', function (event) {
            event.preventDefault()
        })   // 组织默认提交事件

        // 这是清空按钮
        document.querySelector('.empty').addEventListener('click', function () {
            document.querySelector('.ciphertext .output').innerHTML = ''
            document.querySelector('.plaintext .output2').innerHTML = ''
        })

    </script>

</body>

</html>